<template>
    <div id="big_resgin">
	    <div class="resgin">
	    	<div class="resgin_divone">
	    		<span class="resgin_span">会员注册</span>
	    	</div>
	        <i-form  class="from" id="from">
		        <Form-item prop="user" >
		            <i-input type="text" v-model="user" placeholder="手机号码" :maxlength="15"></i-input>
		        </Form-item>
		        <Form-item prop="text">
		            <i-input type="text" v-model="check" placeholder="验证码" :maxlength="6"></i-input>
		            <Button type="primary" id="check">获取验证码</Button>
		        </Form-item>
		        <Form-item prop="password">
		            <i-input type="password" v-model="password" placeholder="登录密码" :maxlength="15"></i-input>
		        </Form-item>
		        
		        <div class="agreement">
		        	<Checkbox v-model="agreement"></Checkbox>
		            <span style="color: #BBBBBB;">我已阅读并同意</span>
		            <span id="agreement">《用户使用协议》</span>
		        </div>
		        <Form-item>
		            <i-button type="primary" @click="ResginSubmit()" class="login_button">注册</i-button>
		        </Form-item>
			</i-form>  
	    </div>
    </div>
</template>
<script>
	export default {
    	name: 'Resgin',
         data () {
            return {
                    user: '',
                    password: '',
                    check:"",
                    agreement: false
            }
        },
        methods: {
            ResginSubmit() {
            	this.$router.push("/")
                /*if (this.user !="" && this.password !="") { 
                	this.$Message.success('信息提交成功!');
                	
                } else if(this.user =="" || this.password ==""){
                	this.$Message.error('表单验证失败!');
                	return;
                }*/
            }
        }
    }
</script>
<style>
	.agreement{
		width: 100%;
		height: 30px;
		line-height: 30px;
		text-align: center;
	}
	#agreement{
		color: #666666;
	}
	#agreement:hover{
		color:#2E6CF0;
		text-decoration: underline;
		cursor: pointer;
	}
	.ivu-form-item-content{
		position: relative;
	}
	#check{
		position: absolute;
		top: 4px;
   		right: 6px;
	}
	.resgin_divone{
		border-bottom: 1px solid #CCCCCC;
		text-align: center;
		padding-bottom: 5px;
	}
	.resgin_span{
		font-size: 19px;
		color: red;
	}
	.resgin{
		width: 425px;
		height: 390px;
		position: absolute;
		left: 50%;
		margin-left: -212.5px;
		top: 50%;
		margin-top: -195px;
		z-index: 100;
		 background: rgba(255, 255, 255, 0.8);
		 padding: 30px 40px;
	}
	#big_resgin{
		position:absolute;
		left:0;
		top:0;
		width:100%;
		height:100%;
		background-image: url('../../../static/img/login_img/320032.jpg');
	}
	.ivu-form-item{
	   	 margin-bottom:18px;
	}
	.ivu-input{
	   	height: 40px;
	   	font-size: 12px;
	}
	#from>.ivu-input-group-append, .ivu-input-group-prepend{
	   	width: 30px;
	}
	.login_button{
	   	width: 100%;
	   	height: 40px;
	   	line-height: 17px;
	   	font-size: 20px;
	   	box-shadow: 1px 3px 10px #2E6CF0;
	   	margin-top: 20px;
	}
	.from{
		   	margin-top: 17px;
		    width: 100%;
	}
	   #from>.ivu-input-group-append, .ivu-input-group-prepend{
	        height: 40px;
	        width: 50px;
	}
	   #from>.ivu-input-group-append, .ivu-input-group>.ivu-input:last-child{
	   		height: 40px;
	   }
</style>